//series[{data:[],color:String,name:String}]


import {colorHexToRgba} from "../../utils/hex-to-decimal";

function echartsLineOptionFactory(xAxisData, series) {
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: 'rgba(3,15,34,0.8)'
                }
            }
        },
        grid: {
            top: '3%',
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xAxisData,
                axisLabel: {
                    color: '#e5f4fe',
                },
                axisLine: {
                    lineStyle: {color: "#2f5f52"}
                },

            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    color: '#e5f4fe',
                },
                axisLine: {
                    lineStyle: {color: "#2f5f52"}
                },

            }
        ],
    }
    var newseries = series.map(function (v) {
        return {
            name: v.name,
            type: 'line',
            // symbol: 'none',
            showSymbol: false,
            lineStyle: {  //线的颜色
                color: v.color
            },
            itemStyle: {
                color: v.color
            },
            areaStyle: {
                type: 'default',
                //渐变色实现
                // 颜色渐变函数 前四个参数分别表示四个位置依次为
                // 右下左上
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: colorHexToRgba(v.color, 0.5), // 0% 处的颜色
                    }, {
                        offset: 1, color: colorHexToRgba(v.color, 0) // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            data: v.data
        }
    });
    option.series = newseries;
    return option;
}

function echartsRadarOptionFactory(data) {
    data.forEach(function (v) {
        v.itemStyle = {
            normal: {
                color: v.color,
                // lineStyle: {
                //     color: v.color,
                // },
            },
        };
    })
    return {

        tooltip: {},
        radar: {
            // shape: 'circle',
            splitNumber: 1,

            name: {
                textStyle: {
                    color: '#9BBDD5',
                    backgroundColor: 'transparent',
                    borderRadius: 0,
                    padding: [0, 0]
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#144574', // 设置网格的颜色
                },
            },
            splitArea: {
                show: false,
                areaStyle: {
                    color: 'rgba(255,0,0,1)', // 图表背景的颜色
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'transparent',
                },
            },
            indicator: [
                {name: '日常巡逻', max: 100},
                {name: '综合评分', max: 100},
                {name: '领导巡逻', max: 100},
                {name: '事故处理', max: 100},
                {name: '交通执法', max: 100},
            ]
        },
        series: [{
            type: 'radar',
            symbol: 'none', // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8,
            // areaStyle: {normal: {}},
            showSymbol: false,

            areaStyle: {
                normal: {
                    width: 1,
                    opacity: 0.3,
                },
            },

            data: data,
        }]
    };
}

//seriesData[{data:[],color:String,name:String}]
function echartsTowCategoryOptionFactory(data, seriesData) {

    var option = {
        tooltip: {},
        grid: {
            top: '3%',
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: data,
            axisLabel: {
                color: '#e5f4fe',
            },
            axisLine: {
                lineStyle: {color: "#2f5f52"}
            },

        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#e5f4fe',
            },
            axisLine: {
                lineStyle: {color: "#2f5f52"}
            },
        },

    };
    option.series = seriesData.map(function (v) {
        return {
            name: v.name,
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: .5, color: v.color, // 0% 处的颜色
                        }, {
                            offset: 1, color: colorHexToRgba(v.color, 0) // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            barWidth: 30,
            data: v.data,
            stack: 'two',
            type: 'bar'
        }
    });
    return option;

}

function echartsSimpePieFactory(color, value, name = "沈海高速") {
    return {
        color: [color, 'transparent'],
        series: [
            {
                type: 'pie',
                radius: ['85%', '100%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },

                data: [{value: value, name: name},
                    {value: 100 - value, name: '青新高速'},],
            }
        ]

    }
}

function echartsScatterFactory(resData,resData2, fun,funSize) {
    console.log(resData2)
    return  {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: 'rgba(3,15,34,0.8)',
                    formatter: function(v){
                        if(v.axisDimension == "y"){
                            return v.value.toFixed()
                        }else if(v.axisDimension == "x"){
                            return v.value+"%"
                        }
                    }
                },

            },
            formatter:function(params) {
                var axisValue = params[0].axisValue;
                var st = "大车占比：<span style='color:#eeb902'>"+axisValue+"%</span>";
                params.forEach(v=>{
                    st +="<br>实时流量：<span style='color:#eeb902'>"+v.data[1]+"</span>"
                })
                return st;
                // console.log(params)
            }

        },
        grid: {
            top: '3%',
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            scale: true,
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#e5f4fe',
                formatter: function(v){
                    return v+'%'
                }
            },
            axisLine: {
                lineStyle: {color: "#2f5f52"}
            },

        },
        yAxis: {
            scale: true,
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#e5f4fe',
            },
            axisLine: {
                lineStyle: {color: "#2f5f52"}
            },
        },
        series: [{
            symbolSize: 8,
            itemStyle: {
                normal: {
                    opacity:.8,
                    shadowBlur: 2,
                    shadowColor: 'rgba(0, 13, 33, 0.5)',
                    shadowOffsetY: 2,
                    color: fun
                }
            },
            data: resData,
            type: 'scatter'
        },{
            type: 'effectScatter',
            data: resData2,
            symbolSize: 10,
            itemStyle: {
                normal: {
                    opacity:1,
                    shadowBlur: 2,
                    shadowColor: 'rgba(0, 13, 33, 0.5)',
                    shadowOffsetY: 2,
                    color: "red"
                }
            },
            zlevel: 1
        }]
    };
}

export {echartsLineOptionFactory, echartsRadarOptionFactory, echartsTowCategoryOptionFactory, echartsSimpePieFactory,echartsScatterFactory};
